<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" />
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <title>record</title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <!-- head 中 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.3/css/jquery-weui.min.css">
</head>
<body>
<div>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="onMenuShareAppMessage();">获取分享状态</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="chooseImage();">选择图片</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="previewImage();">预览图片</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="uploadImage();">上传图片</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="downloadImage();">下载图片</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="startRecord();">开始录音</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="stopRecord();">停止录音</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="playVoice();">播放语音</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="pauseVoice();">暂停播放</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="stopVoice();">停止播放</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="uploadVoice();">上传语音</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="downloadVoice();">下载语音</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="translateVoice();">识别音频并返回识别结果</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="getNetworkType()">获取网络状态</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="openLocation()">使用微信内置地图查看位置</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="getLocation()">获取地理位置</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="scanQRCode()">微信扫一扫</a>
</div>
</body>
<!-- body 最后 -->
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/swiper.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/city-picker.min.js"></script>
<script type="text/javascript">
    $(function () {
        var appId = 'wxb542ace8444c0d2b';
        var url = window.location.href;
        //var jsApiList = ['startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd'];
        var jsApiList = ['onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'onVoicePlayEnd',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'translateVoice',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'];
        $.ajax({
            type: "POST",
            url: "../../api/record/sign?url="+url,
            dataType: "json",
            success: function(res){
                console.log(res.data);
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appId, // 必填，公众号的唯一标识
                    timestamp: res.data.signDto.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.signDto.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.signDto.signature,// 必填，签名，见附录1
                    jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    /*wx.checkJsApi({
                        jsApiList: [
                            'getLocation',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage'
                        ],
                        success: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });*/

                });
                wx.error(function(res){
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });
            },
            error: function (data) {
                console.log(data);
            }
        });
    });

    function onMenuShareAppMessage() {
        wx.onMenuShareTimeline({
            title: '兜仔记',
            link: 'http://www.gdjsxt.cn/wxPages/record/share.html',
            imgUrl: 'http://www.gdjsxt.cn/6.jpg',
            trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                alert('用户点击分享到朋友圈');
            },
            success: function (res) {
                alert('已分享');
            },
            cancel: function (res) {
                alert('已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    }

    var localIds;
    var serverIds;
    //选择图片
    function chooseImage() {
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            }
        });
    }

    //预览图片
    function previewImage() {
        wx.previewImage({
            current: localIds, // 当前显示图片的http链接
            urls: localIds // 需要预览的图片http链接列表
        });
    }

    //上传图片
    function uploadImage() {
        wx.uploadImage({
            localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                serverIds = res.serverId; // 返回图片的服务器端ID
            }
        });
    }

    //下载图片
    function downloadImage() {
        wx.downloadImage({
            serverId: serverIds, // 需要下载的图片的服务器端ID，由uploadImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                var localId = res.localId; // 返回图片下载后的本地ID
            }
        });
    }

    var localRecordId;
    var serverRecordId;
    //开始录音
    function startRecord() {
        wx.startRecord();
        //监听录音自动停止
        /*wx.onVoiceRecordEnd({
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
            complete: function (res) {
                localRecordId = res.localId;
            }
        });*/
    }

    //停止录音
    function stopRecord() {
        wx.stopRecord({
            success: function (res) {
                localRecordId = res.localId;
            }
        });
    }

    //播放语音
    function playVoice() {
        wx.playVoice({
            localId: localRecordId // 需要播放的音频的本地ID，由stopRecord接口获得
        });
        //监听语音播放完毕
        wx.onVoicePlayEnd({
            success: function (res) {
                localRecordId = res.localId; // 返回音频的本地ID
            }
        });
    }

    //暂停播放
    function pauseVoice() {
        wx.pauseVoice({
            localId: localRecordId // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
    }

    //停止播放
    function stopVoice() {
        wx.stopVoice({
            localId: localRecordId // 需要停止的音频的本地ID，由stopRecord接口获得
        });
    }

    //上传语音
    function uploadVoice() {
        wx.uploadVoice({
            localId: localRecordId, // 需要上传的音频的本地ID，由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                serverRecordId = res.serverId; // 返回音频的服务器端ID
            }
        });
    }

    //下载语音
    function downloadVoice() {
        wx.downloadVoice({
            serverId: '', // 需要下载的音频的服务器端ID，由uploadVoice接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                localRecordId = res.localId; // 返回音频的本地ID
            }
        });
    }

    //识别音频并返回识别结果
    function translateVoice() {
        wx.translateVoice({
            localId: localRecordId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                alert(res.translateResult); // 语音识别的结果
            }
        });
    }

    //获取网络状态
    function getNetworkType() {
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            }
        });
    }

    var latitude;
    var longitude;
    var speed;
    var accuracy;
    //使用微信内置地图查看位置
    function openLocation() {
        wx.openLocation({
            latitude: 0, // 纬度，浮点数，范围为90 ~ -90
            longitude: 0, // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: '', // 地址详情说明
            scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }

    //获取地理位置
    function getLocation() {
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                speed = res.speed; // 速度，以米/每秒计
                accuracy = res.accuracy; // 位置精度
            }
        });
    }

    //微信扫一扫
    function scanQRCode() {
        wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            }
        });
    }
</script>
</html>